import {
  FC,
  useRef,
  RefObject,
  useEffect,
  useState,
  CSSProperties,
} from 'react';

import * as echarts from 'echarts/core';
import {
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
} from 'echarts/components';
import { BarChart, LineChart } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';

echarts.use([
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  BarChart,
  LineChart,
  CanvasRenderer,
]);
const defaultBarColor = new echarts.graphic.LinearGradient(0, 0, 1, 1, [
  {
    offset: 0,
    color: '#fff634',
  },
  {
    offset: 1,
    color: '#ff9001',
  },
]);
const buildOptions = (
  dataSource: {
    bar: number[];
    line: number[];
  },
  leftUnit: {
    text: string;
    suffix: string;
  },
  rightUnit: {
    text: string;
    suffix: string;
  },
  category: string[],
  lineColor: string | echarts.graphic.LinearGradient,
  barColor: string | echarts.graphic.LinearGradient,
  title: string,
) => {
  return {
    title: {
      text: title,
      bottom: 0,
      left: 'center',
      textStyle: {
        color: '#fff',
        fontSize: 18,
        fontWeight: 'normal',
      },
    },
    grid: {
      top: 40,
      left: 20,
      right: 20,
      bottom: 40,
      containLabel: true,
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          color: '#000',
        },
        crossStyle: {
          color: '#999',
        },
      },
      textStyle: {
        color: '#000',
      },
    },
    xAxis: [
      {
        type: 'category',
        data: category,
        axisPointer: {
          type: 'line',
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#93FDFF',
          },
        },
        splitLine: {
          show: false,
        },
        axisLabel: {
          show: true,
          color: '#fff',
        },
        axisTick: {
          show: false,
        },
      },
    ],
    yAxis: [
      {
        type: 'value',
        name: leftUnit.text,
        interval: 50,
        axisLabel: {
          formatter: `{value}${leftUnit.suffix}`,
          color: '#fff',
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#06FEF7',
          },
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: false,
        },
      },
      {
        type: 'value',
        name: rightUnit.text,
        interval: 5,
        axisLabel: {
          formatter: `{value}${rightUnit.suffix}`,
          color: '#fff',
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#06FEF7',
          },
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: false,
        },
      },
    ],
    series: [
      {
        name: '金额',
        type: 'bar',
        itemStyle: {
          color: barColor,
        },
        barWidth: 8,
        data: dataSource.bar,
      },
      {
        name: '同比变化',
        type: 'line',
        yAxisIndex: 1,
        itemStyle: {
          color: lineColor,
        },
        showSymbol: false,
        data: dataSource.line,
      },
    ],
  };
};

interface Iprops {
  width?: number | string;
  height?: number | string;
  dataSource: {
    bar: number[];
    line: number[];
  };
  category: string[];
  leftUnit?: {
    text: string;
    suffix: string;
  };
  rightUnit?: {
    text: string;
    suffix: string;
  };
  lineColor?: string | echarts.graphic.LinearGradient;
  barColor?: string | echarts.graphic.LinearGradient;
  title?: string;
  style?: CSSProperties;
}

/**
 * @description 折柱混合图
 * @param props
 * @param {number | string} props.width 宽
 * @param {number | string} props.height 高
 * @param {Object} props.dataSource 数据源
 * @param {Array} props.category x轴坐标
 * @param {Object} props.leftUnit 左侧y轴单位
 * @param {Object} props.rightUnit 右侧y轴单位
 * @param {Object} props.lineColor 折线图颜色
 * @param {Object} props.barColor 柱形图颜色
 * @param {String} props.title 图表标题
 * @param {CSSProperties} props.style 图标样式
 */

const BarLine: FC<Iprops> = (props) => {
  const {
    width = 625,
    height = 230,
    dataSource,
    leftUnit = {
      text: '亿元',
      suffix: '',
    },
    rightUnit = {
      text: '同比变化',
      suffix: '%',
    },
    category,
    lineColor = '#89d3c5',
    barColor = defaultBarColor,
    title = '工业总产值历史趋势图',
    style,
  } = props;

  const [chart, setChart] = useState<echarts.ECharts>();
  const chartRef = useRef() as RefObject<HTMLDivElement>;

  useEffect(() => {
    const chartDom = chartRef.current as HTMLElement;
    const currentChart = echarts.init(chartDom);
    setChart(currentChart);
  }, []);

  useEffect(() => {
    chart &&
      chart.setOption(
        buildOptions(
          dataSource,
          leftUnit,
          rightUnit,
          category,
          lineColor,
          barColor,
          title,
        ),
      );
  }, [
    chart,
    dataSource,
    leftUnit,
    rightUnit,
    category,
    leftUnit,
    rightUnit,
    lineColor,
    barColor,
  ]);

  return (
    <div
      ref={chartRef}
      style={{
        ...style,
        width,
        height,
      }}
    ></div>
  );
};

export default BarLine;
